<template>
  <div class="wrapper" v-show="flag" :style="styleObj">
    <router-link to="/">
      <span class="iconfont">&#xe74a;</span>
    </router-link>
    城市选择
  </div>
</template>

<script>
    export default {
        name: "Header",
      data(){
          return{
            flag:false,
            styleObj:{
              opacity:0.2
            }
          }
      },
      methods:{
        detailStyleChange(){
          let top=document.documentElement.scrollTop;
          console.log(top);
          if(top>60){
            let opacity=top/150;
            console.log(opacity);
            opacity>1 ? 1:opacity;
            this.styleObj={
              opacity:opacity
            }
            this.flag=true;
          }else{
            this.flag=false;
          }
        }
      },
      mounted(){
          window.addEventListener('scroll',this.detailStyleChange)
      }
    }
</script>

<style lang="stylus" scoped>
  .wrapper{
    z-index:2;
    width:100%;
    height:.44rem;
    background:#00bcd4;
    font-size:.16rem;
    line-height:.44rem;
    position:fixed;
    top:0;
    left:0;
    opacity:.3;
    text-align:center;
    color:white;
    span{
      position:absolute;
      color:white;
      left:.16rem;
    }
  }
</style>
